// import './App.css';
import React, { lazy, Suspense } from 'react'   //用class方式创建组件时，需要引用react
// 导入路由组件
import { Route, Redirect, Switch } from 'react-router-dom';

// 用 lazy 函数处理过的组件，变成“懒加载组件”，当用户访问这个组件对应的路由时才会临时加载这个组件
var LoginJsx = lazy(() => import('./views/LoginJsx'))
var ProductJsx = lazy(() => import('./views/ProductJsx'))
var FavoriteJsx = lazy(() => import('./views/FavoriteJsx'))
var SearchJsx = lazy(() => import('./views/SearchJsx'))
var IndexJsx = lazy(() => import('./views/IndexJsx'))
var NotFound = lazy(() => import('./views/NotFound'))

// 引入登录注册页
// import LoginJsx from './views/LoginJsx';
// 引入商品详情页
// import ProductJsx from './views/ProductJsx.jsx';
// 引入收藏页
// import FavoriteJsx from './views/FavoriteJsx'
// 引入搜索页
// import SearchJsx from './views/SearchJsx.jsx';

// import IndexJsx from './views/IndexJsx.jsx';
// 引入路径错误页
// import NotFound from './views/NotFound.jsx';

class App extends React.Component {
  render() {  //负责组件的渲染（只要当前组件渲染一次，render方法必定会调用一次）
    return (
      <div className="App">
        <Suspense fallback={<div className='loading'>loading...</div>}>
          {/* Switch 从上往下依次比较每个路由，一旦匹配到某条路由，则停止匹配，渲染匹配到的路由组件 */}
          <Switch>
            {/* 定义一级路由规则 */}
            {/* 登录注册页 */}
            {/* Route 用来定义路由规则，path 指定路由地址， component 指定路由地址对应的组件，Route组件本身就充当Vue里的 router-view的作用 */}
            {/* exact 是精确匹配的意思 */}
            <Route exact path="/login" component={LoginJsx} />
            {/* 商品详情页 */}
            <Route path="/product" component={ProductJsx} />
            {/* 收藏页 */}
            <Route exact path="/favorite" component={FavoriteJsx} />
            {/* 搜索页 */}
            <Route exact path="/search" component={SearchJsx} />
            {/* index页 */}
            {/* 如果某个组件中有嵌套路由，则当前组件对应的路由规则就不能添加 exact 属性 */}
            <Route path="/index" component={IndexJsx} />
            {/* Redirect 定义重定向路由规则，当浏览器中的地址和 from 属性的地址匹配时，则直接重定向到 to 属性的地址 */}
            <Redirect exact from="/" to="/index" />
            {/* 假如路径跟上面都不匹配时，跳转至下面路由 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    )
  }
}

export default App;
